<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a href="/news">新闻</a>
        |
        <a href="/makefriend">社交</a>

        <div id="content"></div>
    </div>
</body>

</html>
<script>
    // hash
    // 优点:兼容性好 
    // 缺点:视觉上有井号
    //获取hash值:location.hash

    //监听变化 onhashchange

    // onhashchange = function () {
    //     let hash = location.hash
    //     console.log(hash)
    //     switch (hash) {
    //         case "#/news":
    //             content.innerHTML = "<h1>新闻</h1>"
    //             break;
    //         case "#/makefriend":
    //             content.innerHTML = '<h1>社交</h1>'
    //     }
    // }


    //history模式:
    //用了H5给history对象新增的方法:pushState replaceState
    //容易造成404的问题

    let aa = document.querySelectorAll('a')

    aa.forEach(item => {
        item.onclick = function (e) {
            e.preventDefault()
            console.log(this.getAttribute('href'))
            let url = this.getAttribute('href')
            //调用hisoty的方法pushState 浏览器路径会变化,但不会立刻向服务器发起请求
            history.pushState({ name: '韩梅梅' }, null, url)
        }
    })
    //history模式监听事件 点击浏览器的返回和前进按钮才会触发这个事件
    onpopstate = function (e) {
        console.log(e)
    }
</script>